<template>
  <div class="json-formatter">
    <el-card class="formatter-card">
      <template #header>
        <div class="card-header">
          <h2>JSON 格式化工具</h2>
          <p>快速格式化和验证 JSON 数据</p>
        </div>
      </template>
      <div class="formatter-content">
        <div class="input-section">
          <el-input
            v-model="inputJson"
            type="textarea"
            :rows="12"
            placeholder="请输入需要格式化的 JSON 字符串"
            resize="none"
          />
          <div class="actions">
            <el-button type="primary" @click="formatJson">
              <el-icon><Document /></el-icon>
              格式化
            </el-button>
            <el-button @click="clearInput">
              <el-icon><Delete /></el-icon>
              清空
            </el-button>
          </div>
        </div>
        <transition name="fade">
          <div v-if="formattedJson" class="result">
            <div class="result-header">
              <span>格式化结果</span>
              <el-button size="small" @click="copyResult">
                <el-icon><CopyDocument /></el-icon>
                复制
              </el-button>
            </div>
            <pre>{{ formattedJson }}</pre>
          </div>
        </transition>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document, Delete, CopyDocument } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const inputJson = ref('')
const formattedJson = ref('')

const formatJson = () => {
  try {
    const parsed = JSON.parse(inputJson.value)
    formattedJson.value = JSON.stringify(parsed, null, 2)
    ElMessage.success('格式化成功')
  } catch (error) {
    ElMessage.error('JSON 格式不正确')
  }
}

const clearInput = () => {
  inputJson.value = ''
  formattedJson.value = ''
}

const copyResult = () => {
  navigator.clipboard.writeText(formattedJson.value)
  ElMessage.success('复制成功')
}
</script>

<style lang="scss" scoped>
.json-formatter {
  max-width: 1000px;
  margin: 0 auto;
  padding: $spacing-lg;

  .formatter-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);

    .card-header {
      text-align: center;
      padding: $spacing-lg 0;

      h2 {
        font-size: 24px;
        margin-bottom: $spacing-xs;
        color: $text-primary;
      }

      p {
        color: $text-secondary;
      }
    }

    .formatter-content {
      .input-section {
        margin-bottom: $spacing-lg;

        :deep(.el-textarea__inner) {
          font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
          font-size: 14px;
          padding: $spacing-md;
          border-radius: $radius-md;
          background: $background-secondary;
          border: none;
          resize: none;

          &:focus {
            box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
          }
        }

        .actions {
          margin-top: $spacing-md;
          display: flex;
          gap: $spacing-sm;
        }
      }

      .result {
        background: $background-secondary;
        border-radius: $radius-md;
        overflow: hidden;

        .result-header {
          padding: $spacing-sm $spacing-md;
          background: rgba($primary-color, 0.05);
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $text-secondary;
        }

        pre {
          margin: 0;
          padding: $spacing-md;
          font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
          font-size: 14px;
          line-height: 1.5;
          white-space: pre-wrap;
          word-wrap: break-word;
          color: $text-primary;
        }
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .json-formatter {
    padding: $spacing-md;
  }
}
</style> 